import React,{ Component } from 'react';
import {
    HomeLiveStyle,
    HomeLiveUl,
    HomeLiveLi
} from './HomeLiveStyle';

import actionCreators from 'store/tuan-wys/home-live/actionCreators'
import getstore from 'utils/tuan-wys/getstore'

import BScorll from 'better-scroll'

// import { Link } from 'react-router-dom'

const Item = ( props ) => {
    return (
        <HomeLiveLi>
            {/* <Link> */}
                <div className="shopMessage">
                    <img src=  {props.image} alt=""  className="img"/>
                    <div className="discuss"> {props.buyer_number_text} </div>
                </div>
                <div className="shopRecommend">
                    <span className="goods-num">{props.group_name_tag}</span>
                    {props.short_name}
                </div>
                <div className="good-foot">
                    <div className="price">
                        <span className="ct-price">
                            { props.jumei_price}
                        </span>
                        <span className="jm-price">
                            { props.single_price}
                        </span>
                    </div>
                    <div className="time-right">
                        去开团
                    </div>
                </div>
                {/* </Link> */}
        </HomeLiveLi>
    )
}

class HomeLive extends Component{

    componentDidMount() {
        //进行数据请求
        this.props.getCards()
        this.scroll = new BScorll( this.box,{
            mouseWheel: {
                speed: 5,
                invert: false,
                easeTime: 300
               },
               pullUpLoad: {
                threshold: 50 //开启上拉事件
            },
               click: true,
        })
    }

    renderItem = () => {
        return this.props.cards && this.props.cards.data.map( item => <Item 
        { ...item } key={ item.item_id }
        />)
    }

    render () {
        return (
            <HomeLiveStyle ref={ el => this.box = el }>
                <HomeLiveUl>
                    { this.renderItem() }
                </HomeLiveUl>
            </HomeLiveStyle>
        )
    }
    componentDidUpdate() {
        console.log(this.props.cards)
    }
    
}

export default getstore({
    actionCreators,
    UIcomponent:HomeLive,
    type:'home_live'
})